<template>
  <div style="margin-top: 8px">
    <el-row>
      <el-col :span="21" :offset="1">

          <el-input  v-model.trim="name" placeholder="用户名"  @keyup.13.native="search" style="width:200px;margin-right: 10px;" >	</el-input>
          <el-input  v-model.trim="email" placeholder="邮箱" @keyup.13.native="search" style="width:200px;margin-right: 10px;" >	</el-input>
          <el-input  v-model.trim="mobile" placeholder="电话" @keyup.13.native="search" style="width:200px;margin-right: 10px;" >	</el-input>

          <el-button size="small" type="primary" @click="query">搜索</el-button>
          <el-button size="small" type="danger" @click="reset">重置</el-button>
          <el-button size="small" type="success" @click="showAddDialog">添加</el-button>

          <el-table :model="users" :data="users" border style="width: 100%; margin-top: 8px">
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column prop="name" width="75" label="姓名">
            </el-table-column>
            <el-table-column prop="deptName" width="100" label="部门名称">
              <template slot-scope="scope">
                {{scope.row.sysDept === null ? '' :scope.row.sysDept.name }}
              </template>         
            </el-table-column>
            <el-table-column prop="roleName" label="角色"> 
              <template slot-scope="scope">
                {{scope.row.roleName}}
              </template>  
            </el-table-column>
            <el-table-column prop="mobile" width="150" label="电话">
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              width="75">
              <template slot-scope="scope">
                <el-switch
              :value="scope.row.status"
              @change="changeStatus(scope.row.id,scope.row.name)"
              active-color="#67C23A"
              inactive-color="#C0CCDA">
              </el-switch>
              </template>  
            </el-table-column>
            <el-table-column prop="email" width="200" label="邮箱">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="editUser(scope.row.id)"
                  type="info"
                  icon="el-icon-edit"
                  size="mini"
                  >编辑</el-button
                >
                <el-button
                  @click="delUser(scope.row.id)"
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页数据 -->
          <el-pagination
            style="margin-top: 12px"
            background
            layout="prev, pager, next"
            :page-size="5"
            :current-page="current"
            @current-change="goto"
            :total="total"
          >
          </el-pagination>
          <edit-user-dialog @refresh="refresh" ref="editDialog"></edit-user-dialog>
          <add-user-dialog @refresh="refresh" ref="addDialog"></add-user-dialog>
        </el-col>
      </el-row>

  </div>
</template>

<script>
import http from "@/utils/request.js";
import EditUserDialog from "./EditUserDialog.vue";
import AddUserDialog from "./AddUserDialog.vue";

export default {
  components:{
    EditUserDialog,
    AddUserDialog
  },
  data() {
    return {
      name:'',
      email:'',
      mobile:'',
      users: [],
      total: 0,
      current: 1,
      
    };
  },
  mounted() {
    this.goto();
  },
  methods: {
    //渲染数据
    goto(val = 1) {
      http.get(`user?`,{
        params:{
          page:val,
          name:this.name,
          email:this.email,
          mobile:this.mobile         
        }
      }).then(res => {
        this.users = res.data
        this.total = res.total
        this.current = res.current
      })
    },
    async changeStatus(id,name){
      console.log(id,name)
      try {
        await this.$confirm(`你确定要改变${name}的状态吗?`, '警告', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',        
          closeOnClickModal: false,
          type: 'warning'
        })
        await http.get(`user/cs/${id}`)
        this.refresh()
      }catch(err) { // 代码如果进入了 catch块，表示用户点击了取消按钮
        console.log(err)
      }
    },
    query() {
      console.log("搜索")
      this.goto()
    },
    reset() {
      console.log("重置");
      this.name = ''
      this.email = ''
      this.mobile = ''
      this.goto()
    },
    //添加数据
    showAddDialog() {
      this.$refs.addDialog.addUserDialogVisible = true
    },
    //编辑数据
    editUser(id){
      // 调用子编辑模态框组件的根据id获取用户的方法
      this.$refs.editDialog.getById(id)
      // 让编辑模态框展示
      this.$refs.editDialog.editUserDialogVisible = true
    },
    // 删除数据
    async delUser(id) {
      console.log(id);
      try {
        // 对于this.confirm() 使用 await等待的时候，用户点击取消，是通过抛异常的方式
        await this.$confirm("你确定要删除这条数据吗?", "警告", {
          confirmButtonText: "yes",
          cancelButtonText: "no",
          closeOnClickModal: false,
          type: "success",
        });
        // 代码如果能够走下来表示用户点击了确认按钮
        // 删除用户
        await http.delete(`user/${id}`);
        this.$message({ message: "删除成功", type: "success", duration: 1000 });
        this.refresh();
      } catch (err) {
        // 代码如果进入了 catch块，表示用户点击了取消按钮
        console.log(err);
      }
    },
    refresh() {
      this.goto(this.current);
    },
  },
};
</script>



<style>
</style>
